<!DOCTYPE HTML>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
	<!--<![endif]-->

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
		<title>课程列表-因酷在线教育软件-中国在线教育平台第一品牌</title>
		<meta name="author" content="INXEDU(http://www.inxedu.com)" />
		<meta name="keywords" content="INXEDU,在线教育,网校搭建,网校,网络教育,远程教育,云网校,在线学习,在线考试" />
		<meta name="description" content="inxedu是一家专注“在线教育平台”的互联网公司，在国内属顶级在线教育解决方案提供商中的领跑者。为大、中型客户提供领先的在线教育平台方案服务。" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta content="telephone=no" name="format-detection" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/theme.css">
		<link rel="stylesheet" type="text/css" href="../../css/global.css">
		<link rel="stylesheet" type="text/css" href="../../css/web.css">
		<link href="../../css/mw_320_768.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">
		<!--<link href="../../css/mw_320_768_2.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">-->
		<link rel="stylesheet" type="text/css" href="../../css/examtheme.css">
		<link rel="stylesheet" href="../../css/exam-style.css?v=1512129123700">
		<!--<link href="../../css/exam/css/mw_320_768.css" rel="stylesheet" type="text/css" media="screen and (min-width: 320px) and (max-width: 768px)">-->
		<script type="text/javascript" src="../../assets/js/web/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="../../assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../assets/js/web/webutils.js"></script>
		<script type="text/javascript" src="../../js/header.js"></script>
		<script type="text/javascript" src="../../assets/js/common.js"></script>
		<script type="text/javascript" src="../../assets/js/jquery.cookie.js"></script>
		<script type="text/javascript" src="../../js/head.js"></script>

		<script>
			$(function() {
				var token = localStorage["token"];
				if(token != "null" && token != "" && token != null) {
					var json = islogins(token);
					if(json != "null" && json != "" && json != null) {

						if(json.code == 200) {
							haslogin(json, 1);
						}
					}
				}
			})

			var baselocation = "http://localhost:9095";
			var keuploadSimpleUrl = 'http://localhost:8081/image/keupload?';
			var uploadServerUrl = 'http://localhost:8081';
			var uploadSimpleUrl = "http://localhost:8081/image/gok4?";
		</script>
		<script>
			$(function() { //, headers: { 'x-requested-with': 'XMLHttpRequest' }
				$.ajaxSetup({
					crossDomain: true,
					xhrFields: {
						withCredentials: true
					}
				});
			});
		</script>

		<script type="text/javascript" src="../../js/courseInfo.js"></script>
	</head>

	<body class="W-body" id="body">
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/axios.min.js"></script>
		<script src="../../js/vue-router.js"></script>
		<div id="div">
		<div class="in-wrap">
			<div class="changeTheme" style="display: none;">
				<div class="ei-item-box">
					<div class="container pr">
						<a class="fr" id="Replacement" href="javascript:void(0);">
							<img alt="" src="../../static/inxweb/img/HF-BG.png">
						</a>
					</div>
				</div>
				<div class="ei-i-dialog pa" style="height: 120px; top: -120px; opacity: 0; z-index: -1;">
					<div style="height: 100%;" class="ei-i-dialog-box">
						<div class="ei-i-dialog-box-tit">
							<section class="container pr">
								<a title="收起" class="ei-i-close close_a pa" id="close_a" href="javascript: void(0)">
									<em class="vam up-hf"> <img alt="" src="../../static/inxweb/img/up-hf.png">
								</em>
									<tt class="f-fM fsize14 vam">收起</tt>
								</a>
								<span> 主题切换 </span>
							</section>
						</div>
						<div class="ei-i-dialog-box-boy">
							<div class="container">
								<article class="dialog-box-boy-in">
									<ul class="clearfix">
										<li>
											<div id="themeColororange" class="box-boy-in-i  ">
												<a class="pr" href="javascript:changeThemeColor('orange')">
													<img class="pic" alt="" src="../../static/inxweb/img/pic/one-master.jpg">
													<span class="pa name"> 网络课堂--模板一 </span> <em id="triangle-bottomright" class="xz"> &nbsp; </em>
													<div class="loging" style="display:none;">
														<img src="../../static/inxweb/img/loding.gif" alt="">
													</div>
												</a>
											</div>
										</li>
										<li>
											<div id="themeColorgreen" class="box-boy-in-i">
												<a class="pr" href="javascript:changeThemeColor('green')">
													<img class="pic" alt="" src="../../static/inxweb/img/pic/two-green.jpg">
													<span class="pa name"> 网络课堂--模板二 </span> <em id="triangle-bottomright" class="xz"> &nbsp; </em>
													<div class="loging" style="display:none;">
														<img src="../../static/inxweb/img/loding.gif" alt="">
													</div>
												</a>
											</div>
										</li>
										<li>
											<div id="themeColorblue" class="box-boy-in-i">
												<a class="pr" href="javascript:changeThemeColor('blue')">
													<img class="pic" alt="" src="../../static/inxweb/img/pic/three-blue.jpg">
													<span class="pa name"> 网络课堂--模板三 </span> <em id="triangle-bottomright" class="xz"> &nbsp; </em>
													<div class="loging" style="display:none;">
														<img src="../../static/inxweb/img/loding.gif" alt="">
													</div>
												</a>
											</div>
										</li>
									</ul>
								</article>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 公共头引入 -->
			<!-- /global header begin-->
			<header id="header">
				<section class="container">
					<h1 id="logo">
			<a href="http://localhost:8081/" title="因酷在线教育软件">
				<img src="../../images/upload/websiteLogo/20150820/1440035056371.png" width="100%" alt="因酷在线教育软件">
			</a>
		</h1>
					<div class="h-r-nsl">
						<ul class="nav">
							<li>
								<a href="index.html" title="首页">首页</a>
							</li>
							<li>
								<a href="courses-list.html" title="课程">课程</a>
							</li>
							<li>
								<a href="../../teachar/teacher-list.html" title="名师">名师</a>
							</li>
							<li>
								<a href="articlelist.html" title="文章">文章</a>
							</li>
							<li>
								<a href="question-list.html" title="问答">问答</a>
							</li>
						</ul>
						<!-- / nav -->
						<ul class="h-r-login">
							<li id="no-login">
								<a href="javascript:lrFun(1)" title="登录">
									<em class="icon18 login-icon">&nbsp;</em><span class="vam ml5">登录</span>
								</a>
								|
								<a href="javascript:lrFun(2)" title="注册">
									</em><span class="vam ml5">注册</span>
								</a>
							</li>
							<li class="mr10 undis" id="is-login-one">
								<a href="#" title="消息" id="headerMsgCountId">
									<em class="icon18 news-icon">&nbsp;</em>
								</a><q class="red-point" style="display: none">&nbsp;</q></li>
							<li class="h-r-user undis" id="is-login-two">
								<a href="loginInfo.html" title="">
									<img src="../../static/inxweb/img/avatar-boy.gif" id="pic_img" width="30" height="30" class="vam picImg" alt="">
									<span class="vam disIb" id="userName"></span>
								</a>
								<a href="javascript:void(0)" title="退出" onclick="exit();" class="ml5">退出</a>
							</li>
							<!-- /未登录显示第1 li；登录后显示第2，3 li -->
						</ul>
						<aside class="h-r-search">
								<label class="h-r-s-box"><input type="text"  placeholder="输入你想学的课程" name="courseName" v-model="courseName" value="">
						<button type="button" class="s-btn" @click="likeCourse">
							<em class="icon18">&nbsp;</em>
						</button></label>
						</aside>
					</div>
					<aside class="mw-nav-btn">
						<div class="mw-nav-icon"></div>
					</aside>
					<div class="clear"></div>
				</section>
			</header>
			<!-- /global header end-->
			<div class="h-mobile-mask" id="course"></div>
			<div class="head-mobile">
				<div class="head-mobile-box">
					<section class="clearfix">
						<div class="u-face-pic">
							<img src="../../static/inxweb/img/avatar-boy.gif" alt="" class="userImgPhoto">
							<a href="http://localhost:8081/uc/initUpdateUser/1" title="" class="c-fff">修改头像</a>
						</div>
						<h4 class="hLh30 txtOf">
				<span class="fsize16 c-ccc userNameClass">
					<span class="vam ml5" style="cursor:pointer;" onclick="lrFun(1)">登录</span>
				</span>
			</h4>
						<div class="hLh30">
							<a href="http://localhost:8081/uc/initUpdateUser/0" title="个人资料设置" class="c-999">个人资料设置</a>
						</div>
						<div class="hLh20 undis" id="mobileExitDiv">
							<a href="javascript:void(0)" title="退出" onclick="exit();" class="c-999">退出</a>
						</div>
					</section>
					<nav class="mw-nav">
						<ul class="clearfix">
							<li>
								<a href="index.html" title="首页">首页</a>
							</li>
							<li>
								<a href="courses-list.html" title="课程">课程</a>
							</li>
							<li>
								<a href="Teacher.html" title="名师">名师</a>
							</li>
							<li>
								<a href="articlelist.html" title="文章">文章</a>
							</li>
							<li>
								<a href="Score.html" title="考试">考试</a>
							</li>
							<li>
								<a href="wenda.html" title="问答">问答</a>
							</li>
						</ul>
					</nav>
					<section class="u-m-dd">
						<ul>
							<li>
								<span>Wo的学习</span>
								<ol>
									<li class="current">
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/index')" title="">免费课程</a>
									</li>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/front/showcoulist')" title="">选课中心</a>
									</li>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/myFavorites')" title="">Wo的收藏</a>
									</li>
								</ol>
							</li>
						</ul>
						<ul>
							<li>
								<span>Wo的问答</span>
								<ol>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/myquestions/list')" title="">Wo的提问</a>
									</li>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/myrepquestions/list')" title="">Wo的回答</a>
									</li>
								</ol>
							</li>
						</ul>
						<ul>
							<li>
								<span>Wo的资料</span>
								<ol>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/initUpdateUser/0')" title="">基本资料</a>
									</li>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/initUpdateUser/1')" title="">个人头像</a>
									</li>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/initUpdateUser/2')" title="">密码设置</a>
									</li>
								</ol>
							</li>
						</ul>
						<ul>
							<li>
								<span>Wo的消息</span>
								<ol>
									<li>
										<a href="javascript:void(0)" onclick="mobileHrefCheckLogin('http://localhost:8081/uc/letter')" title="">系统消息</a>
									</li>
								</ol>
							</li>
						</ul>
					</section>
				</div>
			</div>
			<script>
				$(function() {
					wmNavFun(); // 手机端导航方法
					goTopFun(); //返回顶部
				})
			</script>

			<!-- 公共头引入 -->
			<!-- /global header begin-->

			<script>
				$(function() {
					wmNavFun(); // 手机端导航方法
					goTopFun(); //返回顶部
				})
			</script>
			<!-- 公共头引入 -->
			<script>
				$(function() {
					var str = '<section style="color: #666;position:absolute;left:50%;bottom:20px;z-index:7;margin-left:-80px;">';
					str += '<span>Powered by</span>';
					str += '<a href="http://www.inxedu.com" target="_blank" title="因酷教育软件" style="margin-left: 2px;color: #666;">因酷教育软件</a>';
					str += '</section>';
					$("body").append(str);
				});
			</script>
			<div id="aCoursesList" class="bg-fa of">
				<!-- /课程列表 开始 -->

				<section class="container">
					<header class="comm-title">
						<h2 class="fl tac">
					<span class="c-333">全部课程</span>
				</h2>
					</header>
					<section class="c-sort-box">
						<section class="c-s-dl">
							<dl>
								<dt>
							<span class="c-999 fsize14">按班型</span>
						</dt>
								<dd class="c-s-dl-li">
									<ul class="clearfix" id="subjectList">
										<li class="current">
											<a @click="courseAll()" title="全部" href="javascript:void(0)">全部</a>
										</li>
										<li class="current" v-for="item in subjectArr">
											<a href="javascript:void(0)" @click="getCourse(item.subjectId)">{{item.subjectName}}</a>
										</li>
										<!--获取课程类型-->
									</ul>

									<aside class="c-s-more">
										<a href="javascript: void(0)" title="" class="fsize14 c-master">[展开]</a>
									</aside>

								</dd>
							</dl>
							<dl>
								<dt>
							<span class="c-999 fsize14">按讲师</span>
						</dt>
								<dd class="c-s-dl-li">
									<ul class="clearfix" id="teacherList">
										<li class="current">
											<a @click="courseAll()" title="全部" href="javascript:void(0)">全部</a>
										</li>
										<li class="current" v-for="item in teacherArr">
											<a href="javascript:void(0)" @click="getCourse(item.subjectId)">{{item.name}}</a>
										</li>
									</ul>
									<aside class="c-s-more">
										<a href="javascript: void(0)" title="" class="fsize14 c-master">[展开]</a>
									</aside>
								</dd>
							</dl>
							<div class="clear"></div>
						</section>
						<div class="js-wrap">
							<section class="fr">
								<span class="c-ccc"> <tt class="c-master f-fM">{{page}}</tt>/<tt class="c-666 f-fM">{{totalPage}}</tt>
						</span>
							</section>
							<section class="fl">
								<ol class="js-tap clearfix">
									<li>
										<a title="关注度" @click="courseSort(1)" href="javascript:void(0)">关注度</a>
									</li>
									<li>
										<a title="最新" @click="courseSort(2)" href="javascript:void(0)">最新</a>
									</li>
									<li>
										<a title="价格" @click="courseSort(3)" href="javascript:void(0)">价格<span></span></a>
									</li>
								</ol>
							</section>
						</div>
						<div class="mt40">
							<article class="comm-course-list">
								<ul class="of" id="courseList">
									<li v-model="courseArr" v-for="it in courseTemp">
										<div class="cc-l-wrap">
											<section class="course-img">
												<img :src="it.logo" class="img-responsive" alt="">
												<div class="cc-mask">
													<a href="javascript: void(0)" title="" class="comm-btn c-btn-1" @click="courseVideo(it.courseId)">开始学习</a>
												</div>
											</section>
											<h3 class="hLh30 txtOf mt10">
									<a href="javascript: void(0)"  title="" class="course-title fsize18 c-333" @click="courseVideo(it.courseId)"> {{it.courseName}}</a>
									
											</h3>
											<section class="mt10 hLh20 of">
												<span class="fr jgTag bg-green"><tt class="c-fff fsize12 f-fA"> 售价 {{it.sourcePrice}}</tt></span>
												<span class="fl jgAttr c-ccc f-fA"> <tt class="c-999 f-fA"> {{it.pageBuycount}} 人学习</tt> | <tt class="c-999 f-fA"> {{it.pageViewcount}} 浏览</tt>
									</span>
											</section>
										</div>
									</li>
								</ul>
								<div class="clear"></div>
							</article>
						</div>
						<!-- 公共分页 开始 -->
						<!--<script type="text/javascript" src="../../../webapp/static/common/web/js/page.js"></script>-->
						<div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" class="undisable" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
							<div class="clear"></div>
						</div>

						<!-- 公共分页 结束 -->

						<form id="searchForm" method="post">
							<input type="hidden" id="totalPageSize" name="totalPageSize" value="" />
							<input type="hidden" id="pageCurrentPage" name="pagecurrentPage" />
							<input type="hidden" name="id" value="" />
							<input type="hidden" id="subject_id" name="subject_id" value="0" />
							<input type="hidden" name="order" value="" />
							<input type="hidden" name="course_name" id="course_name" value="">
						</form>

						<!--<script type="text/javascript">
							var totalPageSize = 2;
							var currentPage =
								0 < 1 ? 1 : 1;
							var totalPage = 2;
							var totalPageSize = $("#totalPageSize").text(totalPageSize);
							var pagecurrentPage = $("#pagecurrentPage").text(currentPage);
							console.log(totalPageSize);
							console.log(pagecurrentPage);

							//							showPageNumber();
						</script>-->
					</section>
				</section>
				<!-- /课程列表 结束 -->
			</div>
			

			<script>
				$(function() {
					cSortFun(); //分类更多按钮交互效果
					scrollLoad(); //响应滚动加载课程图片
				});
				//sort suMore
				var cSortFun = function() {
					$(".c-s-dl>dl .c-s-more>a").each(function() {
						var _this = $(this),
							_uList = _this.parent().siblings("ul"),
							_uLw = _uList.height();
						if(_uLw <= "40") {
							_this.hide();
						} else {
							_uList.css("height", "40px");
							_this.click(function() {
								if(_this.html() == "[展开]") {
									_uList.css("height", "auto");
									_this.text("[收起]");
								} else {
									_uList.css("height", "40px");
									_this.text("[展开]");
								}
							})
						}
					});
				}
			</script>
			<!-- 公共底引入 -->
			<footer id="footer">
				<section class="container">
					<div class="">
						<h4 class="hLh30">
				<span class="fsize18 f-fM c-999">友情链接</span>
			</h4>
						<ul class="of flink-list">
							<li>
								<a href="http://www.xyqhit.com" title="三阳科技" target="_blank">三阳科技</a>
							</li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="b-foot">
						<section class="fl col-7">
							<section class="mr20">
								<section class="b-f-link">
									<a href="/front/helpCenter?id=193" title="关于我们" target="_blank">关于我们</a>|
									<a href="/front/helpCenter?id=194" title="联系我们" target="_blank">联系我们</a>|
									<a href="#" title="成功案例" target="_blank">成功案例</a>|
									<a href="/front/helpCenter" title="帮助中心" target="_blank">帮助中心</a>|
									<span>服务热线：400-006-5079</span> <span>Email：xiejinlong@inxedu.com</span>
								</section>
								<section class="b-f-link mt10">
									<span>©2010-2015 INXEDU有限公司 版权所有 京ICP备15017521号</span>
								</section>
							</section>
						</section>
						<aside class="fl col-3 tac mt15">
							<section class="gf-tx">
								<span><img src="../../static/inxweb/img/wx-icon.png" alt=""></span>
								<div class="gf-tx-ewm">
									<img src="../../images/upload/image/20150908/1441801228269.png" alt="">
								</div>
							</section>
							<section class="gf-tx">
								<span><img src="../../static/inxweb/img/wb-icon.png" alt=""></span>
								<div class="gf-tx-ewm">
									<img src="../../images/upload/image/20150908/1441801298938.png" alt="">
								</div>
							</section>
						</aside>
						<div class="clear"></div>
					</div>
				</section>
			</footer>
			<div class="r-fixed-wrap">
				<ul class="r-fixed-ul">
					<li id="goTopBtn" class="undis">
						<a href="javascript: void(0)" title="返回顶部" class="bg-orange">
							<em class="r-f-icon-3">&nbsp;</em><span>返回顶部</span>
						</a>
					</li>
					<li class="foot-zixun">
						<a href="" title="在线咨询" class="bg-orange">
							<em class="r-f-icon-1">&nbsp;</em><span>在线咨询</span>
						</a>
					</li>
					<li class="foot-zixun">
						<a href="" title="扫描关注" class="bg-orange">
							<em class="r-f-icon-2">&nbsp;</em><span>扫描关注</span>
						</a>
					</li>
				</ul>

			</div>
			<!-- 公共底引入 -->
		</div>
		</div>
		<!-- 统计代码 -->
	</body>
	<script>
				var subjectList = new Vue({
					el: "#div",
					data: {
						subjectArr: [],
						teacherArr: [],
						courseArr: [],
						courseTemp: [],
						sortArr:[],
						page:1,
						totalPage:0,
						pageArr:[],
						courseName:""
						
					},
					created: function() {
						/*
							获取所有科目
						* */
						var _this = this;
						axios.get("http://localhost:9095/user/subject").
						then(function(response) {
									console.log(response)
									_this.subjectArr = response.data.data.listSysSubject
									_this.courseArr = response.data.data.listEduCourseDto
									_this.courseTemp = _this.courseArr
									_this.teacherArr = response.data.data.teachers
									_this.pageArr = _this.courseArr;
									_this.totalPage = Math.ceil(_this.pageArr.length/8)
									_this.first()
								},
								function(error) {
									alert("服务器错误")
								})
							//获取所有教师
//							axios.get("http://localhost:9095/teacher/list").
//							then(function(response) {
//								_this.teacherArr = response.data.data
//							},
//							function(error) {
//								alert("获取教师错误")
//							})

					},
					methods: {
						//每个科目下的课程
						getCourse: function(id) {
							this.courseTemp = [];
							var _this = this;
							this.courseArr.forEach(function(item, index) {
								if(item.subjectId == id) {
									_this.courseTemp.push(item);
								}
							})
							this.page=1;
							_this.pageArr = _this.courseTemp
							_this.totalPage = Math.ceil(_this.pageArr.length/8)
						},
						courseAll: function() {
							this.courseTemp = this.courseArr;
							this.pageArr = this.courseArr;
							this.totalPage = Math.ceil(this.pageArr.length/8)
							this.page =1;
							this.first()
						},

						courseVideo: function(id) {
							localStorage.courseId = id;
							location.href = "../course/course-video.html";
						},
						courseSort:function(type){
							var that = this;
							axios.get("http://localhost:9095/user/subject/sort",{params:{"type":type}})
							.then(function(response){
								that.pageArr = response.data.data;
								that.totalPage = Math.ceil(that.pageArr.length/8)
								that.page=1;
								that.first()
							})
						
						},
						//首页
						first:function(){
							this.page=1;
							this.courseTemp = pageHelp(this.pageArr,8,this.page);
						},
						//上一页
						last:function(){
							if(this.page-1>=1){
								this.page=this.page-1;
							}
							this.courseTemp = pageHelp(this.pageArr,8,this.page);
						},
						//下一页
						next:function(){
							if(this.page+1<=this.totalPage){
								this.page=this.page+1;
							}
							this.courseTemp = pageHelp(this.pageArr,8,this.page);
						},
						//末页
						end:function(){
							this.courseTemp = pageHelp(this.pageArr,8,this.totalPage)
						},
						likeCourse:function(){
							this.pageArr = searchCourse(this.courseName)
							this.totalPage = Math.ceil(this.pageArr.length/8)
							this.courseName="";
							this.first()
						}
					}
				})
				
			</script>
</html>